<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增条码')"/>
    <style>
        .deer-cell {
            border-color: #d3dce6;
            min-height: 46px;
            border-style: solid;
            z-index: 200000;
            text-align: center;
            min-width: 100px;
        }
        .deer-cell .deer-cell-title {
            line-height: 44px;
            font-weight: bold;
            color:  #99a9bf;
            width: auto;
        }
        .deer-cell .el-input--suffix .el-input__inner {
            padding-right: 3px;
            border-radius: 0px;
            padding: 0 3px;
        }
        .deer-cell .el-date-editor.el-input, .deer-cell .el-date-editor.el-input__inner {
            width: auto;
        }
        .deer-cell .el-input{
            color:  #99a9bf;
        }
        .el-input.is-disabled .el-input__inner {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-div">
    <el-divider content-position="left" style="margin-bottom: 20px">条码信息</el-divider>
    <div style="margin-left: 20px;margin-top: 20px">
        <el-row>
            <el-col :span="3" class="deer-cell">
                <span class="deer-cell-title">托盘</span>
            </el-col>
            <el-col :span="3" class="deer-cell">
                <span class="deer-cell-title">批次</span>
            </el-col>
            <el-col :span="4" class="deer-cell" style="width: 185px">
                <span class="deer-cell-title">数量</span>
            </el-col>
            <el-col :span="2">
                <el-button  style="margin-left: 10px" @click="addOutDetail()" type="success" icon="el-icon-plus" circle></el-button>
            </el-col>
        </el-row>

        <el-row v-for="(detail,index) in insert.outDetails">
            <el-col :span="3" class="deer-cell">
                <el-input
                    :disabled="true"
                    placeholder=" "
                    v-model="detail.boxCode"
                    clearable>
                </el-input>
            </el-col>
            <el-col :span="3" class="deer-cell">
                <el-input
                    v-model="detail.batch"
                    :disabled="true"
                    clearable
                    placeholder=" ">
                </el-input>
            </el-col>
            <el-col :span="4" class="deer-cell" style="width: 185px">
                <el-input-number v-model="detail.quantity" :min="0" :max="1000000"></el-input-number>
            </el-col>
            <el-col :span="2" >
                <el-button style="margin-left: 10px" @click="removeOutDetail(index)" type="danger" icon="el-icon-delete" circle></el-button>
            </el-col>
        </el-row>
    </div>
    <el-divider content-position="left" style="margin-bottom: 20px"></el-divider>
    <div style="text-align: center">
        <el-button type="primary" @click="save()">保存</el-button>
        <el-button type="info" @click="closeModal()">返回</el-button>
    </div>

    <el-dialog width="60%" :visible.sync="showOutDetail">
        <el-row>
            <el-col :span="24">
                <el-table border size="small" ref="multipleTable" height="300" @selection-change="handleSelectionChange" :data="item.list">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column property="boxCode" label="托盘"></el-table-column>
                    <el-table-column property="batch" label="批次"></el-table-column>
                    <el-table-column property="quantity" label="数量"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px;text-align: center">
            <el-button size="mini" type="primary" @click="commitItems()">确定</el-button>
            <el-button size="mini" type="info" @click="toggleSelection">取消</el-button>
        </el-row>
    </el-dialog>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" charset="UTF-8">
    var prefix = ctx + "bar"
    var app = new Vue({
        el: '.container-div',
        data: {
            insert: {
                barCode: {
                    info: {}
                },
                outDetails: []
            },
            rows: [],
            showOutDetail: false,
            item: {
                list: [],
                selectItems: []
            }
        },
        methods: {
            /*关闭此页面*/
            closeModal: function(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },

            save: function(){
                var that = this;
                var app = [];
                for(var i = 0; i < that.insert.outDetails.length; i++){
                    app.push(that.insert.outDetails[i].boxCode);
                }
                var str = app.join(",");
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/barCode/insert",
                    data: JSON.stringify({
                        "boxCode": str
                    }),
                    dataType: "json",
                    contentType: "application/json;charset-UTF-8",
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        if(data.code == web_status.SUCCESS){
                            $.modal.msgReload(data.msg, "success")
                        }else if(data.code == web_status.WARNING){
                            $.modal.alertWarning(data.msg)
                        }else{
                            $.modal.alertError(data.msg);
                        }
                    }
                });
            },

            addOutDetail: function(index){
                this.showOutDetail = true;
                this.getBoxItem();
            },

            removeOutDetail: function(index){
                this.insert.outDetails.splice(index,1);
            },

            commitItems: function(){
                var outDetails = this.insert.outDetails;
                this.selectItems.forEach(item => {
                    var detail = {
                        id: item.id,
                        boxCode: item.boxCode,
                        batch: item.batch,
                        quantity: item.quantity
                    };
                    var flag = true;
                    outDetails.forEach(detail => {
                        if(detail.id == item.id){
                            flag = false;
                        }
                    });
                    if(flag){
                        this.insert.outDetails.push(detail);
                    }
                });
                this.toggleSelection();
            },

            toggleSelection(rows){
                this.showOutDetail = false;
                this.selectItems = [];
            },

            handleSelectionChange(items){
                this.selectItems = items;
            },

            getRows(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/subInventory/list",
                    data: {},
                    dataType: "json",
                    contentType: "application/json;charset-UTF-8",
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(res){
                        that.rows = res.rows;
                    }
                })
            },

            getBoxItem(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/in/boxItem/findList",
                    data: {},
                    dataType: "json",
                    contentType: "application/json;charset-UTF-8",
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(res){
                        that.item.list = res.rows;
                    }
                })
            }
        },
        created(){
            this.getRows();
        }
    })
</script>
</body>
</html>